// import { useSelector, useDispatch } from "react-redux";
// import { RootState } from "../store";
import { useAppDispatch, useAppSelector } from "../hooks";

export default function Hello() {
  console.log("Hello Render");

  // 使用 useSelector 获取 store 的 state
  //    处理类型1: 采用计算出来的 RootState 类型，直接标注
  // const count = useSelector((state: RootState) => state.count);
  // const msg = useSelector((state: RootState) => state.msg);
  //    处理类型2：将 useSelector 做一个自定义封装，且处理好类型

  const count = useAppSelector((state) => state.count);
  const msg = useAppSelector((state) => state.msg);

  // 使用 useDispatch 获取 store 的 dispatch 引用
  // const dispatch = useDispatch();
  const dispatch = useAppDispatch();

  const handleClick = () => {
    dispatch({
      type: "INCREMENT",
    });
  };

  return (
    <div>
      <h4>Hello</h4>

      <button onClick={handleClick}>COUNT: {count}</button>
    </div>
  );
}
